import React, { Component } from "react";
import {
  Card,
  Icon,
  Button,
  Empty,
  Avatar,
  Skeleton,
  Modal,
  Checkbox,
  List,
  message,
  Spin,
} from "antd";
import "./style.less";
import { connect } from "react-redux";
import CreateModal from "./CreateModal";
import { json } from "../../utils/ajax";

const store = connect((state) => ({ user: state.user }));

@store
class Collection extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    collections: [], //作品列表
    isShowCreateModal: false,
    loading: false,
    typeStr: "",
    videoTypeData: {},
  };
  componentDidMount() {
    this.getCollections();
  }
  /**
   * 获得作品集数据
   */
  getCollections = async () => {
    this.setState({
      loading: true,
    });
    const res = await json.get("/works/list");
    this.setState({
      collections: res.data || [],
      loading: false,
    });
  };

  goEdit(e, item) {
    this.props.history.push({
      pathname: `videolist`,
      data: {
        ...item,
      },
    });
  }
  /**
   * 打开/关闭创建模态框
   */
  toggleShowCreateModal = (visible) => {
    this.setState({
      isShowCreateModal: visible,
      typeStr: "add",
    });
  };
  changeVideoType = (item) => {
    this.setState({
      isShowCreateModal: true,
      typeStr: "edit",
      videoTypeData: {
        ...item,
      },
    });
  };
  openCreateModal = () => {
    this.toggleShowCreateModal(true);
  };
  openDeleteModal = () => {
    let ids = [];
    Modal.confirm({
      title: "请在下面勾选要删除的项目(仅管理员)",
      content: (
        <div style={{ marginTop: 30 }}>
          <Checkbox.Group onChange={(values) => (ids = values)}>
            {this.state.collections.map((item) => (
              <p key={item.id}>
                <Checkbox value={item.id}>{item.title}</Checkbox>
              </p>
            ))}
          </Checkbox.Group>
        </div>
      ),
      maskClosable: true,
      okButtonProps: {
        disabled: !this.props.user.isAdmin,
      },
      onOk: async () => {
        const res = await json.post("/works/delete", { ids });
        if (res.status === 0) {
          message.success("删除成功");
          this.getCollections();
        }
      },
    });
  };

  render() {
    const { collections, isShowCreateModal, loading } = this.state;
    const colors = ["#f3b47e", "#83d3d3", "#8bc2e8", "#a3c7a3"];
    return (
      <div>
        <Spin spinning={loading}>
          <Card bordered={false}>
            <div style={{ textAlign: "right", marginBottom: 40 }}>
              <Button icon="plus" onClick={this.openCreateModal}>
                创建
              </Button>
              &emsp;
              <Button icon="delete" type="danger" onClick={this.openDeleteModal}>
                删除
              </Button>
            </div>
            <div style={styles.box}>
              <List
                dataSource={collections}
                renderItem={(item) => (
                  <List.Item
                    actions={[
                      <a key="list-loadmore-edit" onClick={(e) => this.changeVideoType(item)}>
                        编辑
                      </a>,
                      <a key="list-loadmore-edit" onClick={(e) => this.goEdit(e, item)}>
                        视频详情
                      </a>,
                    ]}
                  >
                    <Skeleton avatar title={false} loading={item.loading} active>
                      <List.Item.Meta
                        avatar={<Avatar src={item.icon} />}
                        title={<a href="https://ant.design">{item.title}</a>}
                        description={item.description}
                      />
                    </Skeleton>
                  </List.Item>
                )}
              ></List>
            </div>
            {!collections.length && <Empty />}
          </Card>
          {this.state.isShowCreateModal ? (
            <CreateModal
              visible={isShowCreateModal}
              typeData={this.state.videoTypeData}
              typeStr={this.state.typeStr}
              toggleVisible={this.toggleShowCreateModal}
              onCreated={this.getCollections}
            />
          ) : (
            ""
          )}
        </Spin>
      </div>
    );
  }
}

const styles = {
  box: {
    // display: 'flex',
    // width: '100%',
    // flexWrap: 'wrap',
  },
};

export default Collection;
